<template>
  <div class="student-management-container">
    <!-- 页面标题和状态区域 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <span class="title-icon">🎓</span>
          {{ isAdmin ? '学生信息管理' : '我的学生信息' }}
        </h1>
        <div class="header-stats" v-if="isAdmin">
          <div class="stat-badge">
            <span class="stat-number">{{ students.length }}</span>
            <span class="stat-label">学生</span>
          </div>
          <div class="stat-badge">
            <span class="stat-number">{{ selectedStudents.length }}</span>
            <span class="stat-label">已选择</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作区域 -->
    <div class="header-actions" v-if="isAdmin">
      <div class="left-actions">
        <el-button type="primary" @click="showAddDialog" class="action-btn add-btn">
          <el-icon><Plus /></el-icon>添加学生
        </el-button>
        <el-button 
          type="danger" 
          @click="handleBatchDelete" 
          v-if="selectedStudents.length > 0"
          class="action-btn batch-btn"
        >
          <el-icon><Delete /></el-icon>批量删除 ({{ selectedStudents.length }})
        </el-button>
      </div>
    </div>



    <!-- 内容区域 -->
    <div class="content-section">
      <div v-loading="loading" class="loading-wrapper">
        <!-- 管理员表格视图 -->
        <div v-if="isAdmin" class="admin-table-container">
          <el-card class="table-card" shadow="never">
            <el-table
              :data="filteredStudents"
              style="width: 100%"
              stripe
              border
              empty-text="暂无学生数据"
              @selection-change="handleSelectionChange"
              class="modern-table"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="stuId" label="学号" width="100" align="center">
                <template #default="scope">
                  <el-tag type="primary" size="small">{{ scope.row.stuId }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="stuName" label="姓名" width="120" align="center">
                <template #default="scope">
                  <div class="name-cell">
                    <el-avatar :size="32" :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${scope.row.stuName}`">
                      {{ scope.row.stuName.charAt(0) }}
                    </el-avatar>
                    <span class="name-text">{{ scope.row.stuName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="stuAge" label="年龄" width="80" align="center">
                <template #default="scope">
                  <el-tag type="info" size="small">{{ scope.row.stuAge }}岁</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="stuGrade" label="年级" width="100" align="center">
                <template #default="scope">
                  <el-tag type="success" size="small">{{ scope.row.stuGrade || '未填写' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="stuDemp" label="专业" width="150" align="center">
                <template #default="scope">
                  <el-tag type="warning" size="small">{{ scope.row.stuDemp || '未填写' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="stuClass" label="班级" width="100" align="center" show-overflow-tooltip />
              <el-table-column prop="stuSchoolName" label="学校" width="200" align="center" show-overflow-tooltip />
              <el-table-column prop="stuPhone" label="手机号" width="130" align="center" show-overflow-tooltip />
              <el-table-column prop="stuEmail" label="邮箱" width="200" align="center" show-overflow-tooltip />
              <el-table-column prop="stuAddress" label="地址" width="200" align="center" show-overflow-tooltip />

              <el-table-column label="操作" width="200" fixed="right" align="center">
                <template #default="scope">
                  <el-button-group>
                    <el-button 
                      size="small" 
                      type="primary"
                      @click="showEditDialog(scope.row)" 
                      v-if="canEdit(scope.row)"
                      class="table-action-btn"
                    >
                      <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button 
                      size="small" 
                      type="info" 
                      @click="showViewDialog(scope.row)" 
                      v-if="!canEdit(scope.row)"
                      class="table-action-btn"
                    >
                      <el-icon><View /></el-icon>
                    </el-button>
                    <el-button 
                      size="small" 
                      type="danger" 
                      @click="handleDelete(scope.row.id)" 
                      v-if="isAdmin"
                      class="table-action-btn"
                    >
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        
        <!-- 普通用户卡片视图 -->
        <div v-else class="user-cards-container">
          <transition name="fade">
            <div v-if="filteredStudents.length === 0" class="empty-state modern">
              <div class="empty-icon">🎓</div>
              <h3 class="empty-title">暂无学生数据</h3>
              <p class="empty-description">请联系管理员添加学生信息</p>
            </div>
          </transition>
          
          <transition-group name="card-list" tag="div" class="student-cards-grid">
            <div v-for="student in filteredStudents" :key="student.id" class="student-card modern">
              <div class="card-overlay"></div>
              
              <!-- 卡片头部 -->
              <div class="card-header modern">
                <div class="student-avatar-section">
                  <el-avatar 
                    :size="80" 
                    :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${student.stuName}`"
                    class="student-avatar-large"
                  >
                    {{ student.stuName.charAt(0) }}
                  </el-avatar>
                  <div class="avatar-ring"></div>
                </div>
                <div class="student-basic-info">
                  <h3 class="student-name-large">{{ student.stuName }}</h3>
                  <div class="student-id-badge">
                    <el-tag type="primary" size="small" class="id-tag">
                      学号: {{ student.stuId }}
                    </el-tag>
                  </div>
                </div>
              </div>
              
              <!-- 卡片内容 -->
              <div class="card-content modern">
                <div class="info-grid">
                  <div class="info-item modern">
                    <div class="info-icon age">🎂</div>
                    <div class="info-details">
                      <span class="info-label">年龄</span>
                      <span class="info-value">{{ student.stuAge }}岁</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon grade">🎠</div>
                    <div class="info-details">
                      <span class="info-label">年级</span>
                      <span class="info-value">{{ student.stuGrade || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon major">📚</div>
                    <div class="info-details">
                      <span class="info-label">专业</span>
                      <span class="info-value">{{ student.stuDemp || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon class">🏫</div>
                    <div class="info-details">
                      <span class="info-label">班级</span>
                      <span class="info-value">{{ student.stuClass || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon phone">📱</div>
                    <div class="info-details">
                      <span class="info-label">手机号</span>
                      <span class="info-value">{{ student.stuPhone || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern">
                    <div class="info-icon email">📧</div>
                    <div class="info-details">
                      <span class="info-label">邮箱</span>
                      <span class="info-value">{{ student.stuEmail || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern wide">
                    <div class="info-icon school">🏢</div>
                    <div class="info-details">
                      <span class="info-label">学校</span>
                      <span class="info-value">{{ student.stuSchoolName || '未填写' }}</span>
                    </div>
                  </div>
                  
                  <div class="info-item modern wide">
                    <div class="info-icon address">🏠</div>
                    <div class="info-details">
                      <span class="info-label">地址</span>
                      <span class="info-value">{{ student.stuAddress || '未填写' }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 卡片操作按钮 -->
              <div class="card-actions modern">
                <el-button 
                  type="primary" 
                  size="default" 
                  @click="showEditDialog(student)" 
                  v-if="canEdit(student)"
                  class="card-action-btn edit-btn"
                >
                  <el-icon><Edit /></el-icon>
                  编辑信息
                </el-button>
                <el-button 
                  type="info" 
                  size="default" 
                  @click="showViewDialog(student)"
                  v-if="!canEdit(student)"
                  class="card-action-btn view-btn"
                >
                  <el-icon><View /></el-icon>
                  查看详情
                </el-button>
                <el-button 
                  type="danger" 
                  size="default" 
                  @click="handleDelete(student.id)"
                  v-if="isAdmin"
                  class="card-action-btn delete-btn"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </div>
          </transition-group>
        </div>
      </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑学生信息' : '添加学生信息'"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学号" prop="stuId">
              <el-input v-model="form.stuId" placeholder="请输入学号" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="stuName">
              <el-input v-model="form.stuName" placeholder="请输入姓名" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄" prop="stuAge">
              <el-input-number v-model="form.stuAge" :min="1" :max="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级" prop="stuGrade">
              <el-input v-model="form.stuGrade" placeholder="请输入年级" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专业" prop="stuDemp">
              <el-input v-model="form.stuDemp" placeholder="请输入专业" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级" prop="stuClass">
              <el-input v-model="form.stuClass" placeholder="请输入班级" :disabled="isEdit && !isAdmin" />
            </el-form-item>
          </el-col>
        </el-row>
        
                  <el-form-item label="学校" prop="stuSchoolName">
          <el-input v-model="form.stuSchoolName" placeholder="请输入学校名称" :disabled="isEdit && !isAdmin" />
           </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="stuPhone">
              <el-input v-model="form.stuPhone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="stuEmail">
              <el-input v-model="form.stuEmail" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="地址" prop="stuAddress">
          <el-input v-model="form.stuAddress" placeholder="请输入地址" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>



    <!-- 查看对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="查看学生信息"
      width="600px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="学号">{{ viewForm.stuId }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ viewForm.stuName }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ viewForm.stuAge }}</el-descriptions-item>
        <el-descriptions-item label="年级">{{ viewForm.stuGrade }}</el-descriptions-item>
        <el-descriptions-item label="专业">{{ viewForm.stuDemp }}</el-descriptions-item>
        <el-descriptions-item label="班级">{{ viewForm.stuClass }}</el-descriptions-item>
        <el-descriptions-item label="学校">{{ viewForm.stuSchoolName }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ viewForm.stuPhone }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ viewForm.stuEmail }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ viewForm.stuAddress }}</el-descriptions-item>

      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Edit, Check, View, Delete } from '@element-plus/icons-vue'
import axios from 'axios'
import { permissions, fetchPermissions } from '@/utils/permissions'

export default {
  name: 'StudentManagement',
  setup() {
    const loading = ref(false)
    const students = ref([])

    const selectedStudents = ref([])
    // 管理员表格需要选择功能
    const dialogVisible = ref(false)
    const isEdit = ref(false)
    const formRef = ref()

    const form = reactive({
      id: null,
      stuId: '',
      stuName: '',
      stuAge: 18,
      stuGrade: '',
      stuDemp: '',
      stuClass: '',
      stuSchoolName: '',
      stuPhone: '',
      stuEmail: '',
      stuAddress: '',

    })



    // 查看相关
    const viewDialogVisible = ref(false)
    const viewForm = reactive({
      id: null,
      stuId: '',
      stuName: '',
      stuAge: 18,
      stuGrade: '',
      stuDemp: '',
      stuClass: '',
      stuSchoolName: '',
      stuPhone: '',
      stuEmail: '',
      stuAddress: '',

    })

    // 获取当前用户信息
    const userRole = localStorage.getItem('role') || 'student'
    const currentUserId = localStorage.getItem('userId')
    const currentUsername = localStorage.getItem('username')
    const isAdmin = computed(() => userRole === 'admin')

    const rules = {
      stuId: [
        { required: true, message: '请输入学号', trigger: 'blur' }
      ],
      stuName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      stuAge: [
        { required: true, message: '请输入年龄', trigger: 'blur' }
      ]
    }

    const filteredStudents = computed(() => {
      let filteredData = students.value
      
      // 如果不是管理员，只显示当前用户的数据
      if (!isAdmin.value) {
        filteredData = students.value.filter(student => 
          student.stuName === currentUsername || student.stuId === currentUsername
        )
      }
      
      return filteredData
    })

    const fetchStudents = async () => {
      loading.value = true
      try {
        // 首先获取权限信息
        await fetchPermissions()
        console.log('权限获取完成，开始获取学生列表')
        
        // 然后获取学生详细信息（不分页）
        const studentResponse = await axios.get('/api/student/list')
        
        if (studentResponse.data.code === 1) {
          students.value = studentResponse.data.data;
          console.log('学生数据:', students.value);
        } else {
          ElMessage.warning(studentResponse.data.msg || '获取学生列表失败')
          students.value = []
        }
      } catch (error) {
        console.error('获取学生列表失败:', error)
        ElMessage.error(error.response?.data?.message || '获取学生列表失败')
        students.value = []
      } finally {
        loading.value = false
      }
    }

    const showAddDialog = () => {
      isEdit.value = false
      resetForm()
      dialogVisible.value = true
    }

    const showEditDialog = (student) => {
      isEdit.value = true
      Object.assign(form, student)
      dialogVisible.value = true
    }

    const resetForm = () => {
      Object.assign(form, {
        id: null,
        stuId: '',
        stuName: '',
        stuAge: 18,
        stuGrade: '',
        stuDemp: '',
        stuClass: '',
        stuSchoolName: '',
        stuPhone: '',
        stuEmail: '',
        stuAddress: ''
      })
    }

    const handleSubmit = async () => {
      if (!formRef.value) return
      
      await formRef.value.validate(async (valid) => {
        if (valid) {
          try {
            if (isEdit.value) {
              await axios.post('/api/student/update', form)
              ElMessage.success('更新成功')
            } else {
              const addForm = { ...form }
              await axios.post('/api/student/save', addForm)
              ElMessage.success('添加成功，等待管理员审批')
            }
            dialogVisible.value = false
            fetchStudents()
          } catch (error) {
            ElMessage.error(error.response?.data?.message || '操作失败')
          }
        }
      })
    }

    const handleDelete = async (id) => {
      try {
        await ElMessageBox.confirm('确定要删除这个学生吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await axios.delete('/api/student/removeById', {
          params: { id }
        })
        ElMessage.success('删除成功')
        fetchStudents()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败')
        }
      }
    }

    // 管理员表格需要批量删除功能
    const handleBatchDelete = async () => {
      try {
        await ElMessageBox.confirm(
          `确定要批量删除选中的 ${selectedStudents.value.length} 个学生吗？此操作不可恢复！`,
          '警告',
          {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        const ids = selectedStudents.value.map(student => student.id)
        await axios.delete('/api/student/removeByIds', {
          params: { ids }
        })
        ElMessage.success('批量删除成功')
        selectedStudents.value = []
        fetchStudents()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('批量删除失败')
        }
      }
    }

    // 管理员表格需要选择功能
    const handleSelectionChange = (selection) => {
      selectedStudents.value = selection
    }



    const showViewDialog = (student) => {
      Object.assign(viewForm, student)
      viewDialogVisible.value = true
    }

    // 权限控制方法
    const canEdit = (student) => {
      console.log('当前用户角色:', userRole);
      console.log('当前用户名:', currentUsername);
      console.log('学生信息:', student);
      console.log('全局权限状态:', permissions);
      
      // 管理员可以编辑所有学生信息
      if (isAdmin.value) {
        console.log('是管理员，允许编辑');
        return true;
      }
      
      // 检查是否是自己的信息
      const isOwnInfo = student.stuName === currentUsername || student.stuId === currentUsername;
      console.log('是否是自己的信息:', isOwnInfo);
      
      // 检查是否有全局编辑权限
      const hasEditPermission = permissions.hasStudentEditPermission();
      console.log('是否有全局编辑权限:', hasEditPermission);
      
      // 同时满足：是自己的信息 且 有全局编辑权限
      const canEditResult = isOwnInfo && hasEditPermission;
      console.log('最终是否可以编辑:', canEditResult);
      
      return canEditResult;
    }







    // 无分页，移除分页事件处理

    onMounted(() => {
      fetchStudents()
    })

    return {
      loading,
      students,

      selectedStudents, // 管理员表格需要选择功能
      dialogVisible,
      isEdit,
      formRef,
      form,
      rules,
      filteredStudents,

      viewDialogVisible,
      viewForm,
      isAdmin,
      showAddDialog,
      showEditDialog,
      showViewDialog,
      handleSubmit,
      handleDelete,
      handleBatchDelete, // 管理员表格需要批量删除功能
      handleSelectionChange, // 管理员表格需要选择功能

      
      canEdit,

    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.student-management-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

.student-management-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 70% 20%, rgba(255, 107, 107, 0.2) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(132, 250, 176, 0.2) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.student-management-container > * {
  position: relative;
  z-index: 1;
}

/* 页面头部样式 */
.page-header {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  padding: 40px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
  pointer-events: none;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  animation: slideInLeft 0.8s ease-out;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 2.2rem;
  animation: bounce 2s infinite;
}

.header-stats {
  display: flex;
  gap: 20px;
  animation: slideInRight 0.8s ease-out 0.4s both;
}

.stat-badge {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  padding: 16px 24px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  min-width: 80px;
}

.stat-badge:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 500;
}

/* 操作区域样式 */
.header-actions {
  padding: 0 40px 30px 40px;
  margin-bottom: 20px;
}

.left-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.action-btn {
  height: 50px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-btn {
  background: linear-gradient(135deg, #74b9ff 0%, #00cec9 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(116, 185, 255, 0.3);
}

.add-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(116, 185, 255, 0.4);
}

.batch-btn {
  background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
  color: white;
  box-shadow: 0 8px 20px rgba(253, 121, 168, 0.3);
}

.batch-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(253, 121, 168, 0.4);
}

/* 内容区域样式 */
.content-section {
  padding: 0 40px 40px 40px;
}

.loading-wrapper {
  min-height: 400px;
}

/* 管理员表格样式 */
.admin-table-container {
  animation: fadeInUp 0.6s ease-out;
}

.table-card {
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #74b9ff 0%, #00cec9 50%, #fd79a8 100%);
  z-index: 1;
}

.modern-table {
  border-radius: 0;
}

.modern-table .el-table__header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.modern-table .el-table__header th {
  background: transparent;
  color: #4a5568;
  font-weight: 700;
  border: none;
  padding: 16px 12px;
  font-size: 14px;
}

.modern-table .el-table__body td {
  border-color: rgba(226, 232, 240, 0.6);
  padding: 16px 12px;
}

.modern-table .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(116, 185, 255, 0.02);
}

.modern-table .el-table__body tr:hover td {
  background: rgba(116, 185, 255, 0.05);
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.name-text {
  font-weight: 600;
  color: #2d3748;
}

.table-action-btn {
  border-radius: 8px;
  padding: 8px;
  margin: 0 2px;
  border: none;
  transition: all 0.3s ease;
}

.table-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 用户卡片视图样式 */
.user-cards-container {
  animation: fadeInUp 0.6s ease-out;
}

.empty-state.modern {
  text-align: center;
  padding: 80px 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 24px;
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 12px;
}

.empty-description {
  color: #718096;
  font-size: 1rem;
  margin: 0;
}

.student-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 30px;
  padding: 0;
}

.student-card.modern {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.student-card.modern:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #74b9ff 0%, #00cec9 50%, #fd79a8 100%);
  z-index: 2;
}

.card-header.modern {
  padding: 32px 32px 24px 32px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(226, 232, 240, 0.6) 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.3);
  display: flex;
  align-items: center;
  gap: 20px;
}

.student-avatar-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-avatar-large {
  border: 4px solid rgba(116, 185, 255, 0.3);
  box-shadow: 0 8px 24px rgba(116, 185, 255, 0.2);
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

.avatar-ring {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(45deg, #74b9ff, #00cec9, #fd79a8) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: rotate 4s linear infinite;
}

.student-basic-info {
  flex: 1;
}

.student-name-large {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.student-id-badge .id-tag {
  background: linear-gradient(135deg, rgba(116, 185, 255, 0.15) 0%, rgba(0, 206, 201, 0.15) 100%);
  color: #2d3748;
  border: 1px solid rgba(116, 185, 255, 0.2);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px;
}

.card-content.modern {
  padding: 24px 32px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item.modern {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(226, 232, 240, 0.3);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-item.modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: rgba(116, 185, 255, 0.3);
}

.info-item.modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(116, 185, 255, 0.6) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.info-item.modern:hover::before {
  transform: translateX(100%);
}

.info-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.info-icon.age {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.info-icon.grade {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.info-icon.major {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.info-icon.class {
  background: linear-gradient(135deg, #c3cfe2 0%, #c3cfe2 100%);
}

.info-icon.phone {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.info-icon.email {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.info-icon.school {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.info-icon.address {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.info-item.wide {
  grid-column: 1 / -1;
}

.info-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 0.85rem;
  color: #718096;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 1rem;
  color: #2d3748;
  font-weight: 600;
  line-height: 1.2;
}

.card-actions.modern {
  padding: 24px 32px 32px 32px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-top: 1px solid rgba(226, 232, 240, 0.3);
  display: flex;
  gap: 12px;
  justify-content: center;
}

.card-actions.modern .el-button {
  min-width: 120px;
  height: 44px;
  font-weight: 600;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-actions.modern .el-button--primary {
  background: linear-gradient(135deg, #74b9ff 0%, #00cec9 100%);
  box-shadow: 0 6px 16px rgba(116, 185, 255, 0.3);
}

.card-actions.modern .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(116, 185, 255, 0.4);
}

.card-actions.modern .el-button--info {
  background: linear-gradient(135deg, #a29bfe 0%, #74b9ff 100%);
  box-shadow: 0 6px 16px rgba(162, 155, 254, 0.3);
}

.card-actions.modern .el-button--info:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(162, 155, 254, 0.4);
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.card-list-enter-active {
  transition: all 0.6s ease;
}

.card-list-leave-active {
  transition: all 0.4s ease;
}

.card-list-enter-from {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}

.card-list-leave-to {
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
}

.card-list-move {
  transition: transform 0.6s ease;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .student-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
  }
  
  .content-section {
    padding: 0 20px 40px 20px;
  }
  
  .header-actions {
    padding: 0 20px 30px 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 20px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .header-stats {
    justify-content: center;
  }
  
  .student-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .card-header.modern {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .card-actions.modern {
    flex-direction: column;
  }
  
  .left-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  
  .action-btn {
    width: 100%;
    justify-content: center;
  }
  
  .content-section {
    padding: 0 15px 20px 15px;
  }
  
  .header-actions {
    padding: 0 15px 20px 15px;
  }
  
  .table-card {
    margin: 0;
    border-radius: 16px;
  }
  
  .empty-state.modern {
    margin: 20px 0;
    padding: 40px 20px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.5rem;
  }
  
  .title-icon {
    font-size: 1.5rem;
  }
  
  .stat-badge {
    padding: 12px 16px;
    min-width: 60px;
  }
  
  .stat-number {
    font-size: 1.4rem;
  }
  
  .card-header.modern {
    padding: 20px;
  }
  
  .card-content.modern {
    padding: 16px 20px;
  }
  
  .card-actions.modern {
    padding: 16px 20px 20px 20px;
  }
  
  .student-name-large {
    font-size: 1.2rem;
  }
  
  .action-btn {
    height: 44px;
    font-size: 14px;
  }
}

/* 对话框样式优化 */
.el-dialog {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 30px;
  border-bottom: none;
}

.el-dialog__title {
  font-weight: 700;
  font-size: 1.3rem;
}

.el-dialog__body {
  padding: 30px;
  background: #fafbfc;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 30px 30px 30px;
  background: #fafbfc;
  border-top: 1px solid #e2e8f0;
}

.dialog-footer .el-button {
  min-width: 100px;
  height: 40px;
  font-weight: 600;
  border-radius: 12px;
}

/* 表单样式优化 */
.el-form-item {
  margin-bottom: 24px;
}

.el-form-item__label {
  font-weight: 600;
  color: #4a5568;
  font-size: 14px;
}

.el-input__wrapper {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.el-input__wrapper:hover {
  border-color: #74b9ff;
  box-shadow: 0 4px 12px rgba(116, 185, 255, 0.15);
}

.el-input__wrapper.is-focus {
  border-color: #74b9ff;
  box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
}

.el-select .el-input__wrapper {
  border-radius: 12px;
}

.el-popper {
  border-radius: 12px;
  border: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.el-select-dropdown__item {
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.2s ease;
}

.el-select-dropdown__item:hover {
  background: linear-gradient(135deg, rgba(116, 185, 255, 0.1) 0%, rgba(0, 206, 201, 0.1) 100%);
  color: #2d3748;
}

/* 消息提示样式 */
.el-message {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border: none;
}

.el-message--success {
  background: linear-gradient(135deg, #00cec9 0%, #55efc4 100%);
}

.el-message--error {
  background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
}

.el-message--warning {
  background: linear-gradient(135deg, #fdcb6e 0%, #fd79a8 100%);
}

/* 加载动画优化 */
.el-loading-spinner {
  margin-top: -25px;
}

.el-loading-spinner .circular {
  width: 50px;
  height: 50px;
}

.el-loading-spinner .path {
  stroke: #74b9ff;
  stroke-width: 3;
}

.el-loading-text {
  color: #74b9ff;
  font-weight: 600;
  font-size: 14px;
  margin-top: 15px;
}

/* 按钮样式优化 */
.el-button {
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-button--primary {
  background: linear-gradient(135deg, #74b9ff 0%, #00cec9 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(116, 185, 255, 0.4);
}

.el-button--danger {
  background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(253, 121, 168, 0.3);
}

.el-button--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(253, 121, 168, 0.4);
}

.el-button--info {
  background: linear-gradient(135deg, #a29bfe 0%, #74b9ff 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(162, 155, 254, 0.3);
}

.el-button--info:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(162, 155, 254, 0.4);
}

/* 标签样式优化 */
.el-tag {
  border-radius: 8px;
  font-weight: 600;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.el-tag--primary {
  background: linear-gradient(135deg, rgba(116, 185, 255, 0.15) 0%, rgba(0, 206, 201, 0.15) 100%);
  color: #2d3748;
  border: 1px solid rgba(116, 185, 255, 0.2);
}

.el-tag--success {
  background: linear-gradient(135deg, rgba(0, 206, 201, 0.15) 0%, rgba(85, 239, 196, 0.15) 100%);
  color: #2d3748;
  border: 1px solid rgba(0, 206, 201, 0.2);
}

.el-tag--warning {
  background: linear-gradient(135deg, rgba(253, 203, 110, 0.15) 0%, rgba(253, 121, 168, 0.15) 100%);
  color: #2d3748;
  border: 1px solid rgba(253, 203, 110, 0.2);
}

.el-tag--info {
  background: linear-gradient(135deg, rgba(162, 155, 254, 0.15) 0%, rgba(116, 185, 255, 0.15) 100%);
  color: #2d3748;
  border: 1px solid rgba(162, 155, 254, 0.2);
}

/* 批量操作样式 */
.batch-actions {
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #74b9ff 0%, #00cec9 100%);
  border-radius: 4px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0984e3 0%, #00b894 100%);
}

/* 表格列宽度优化 */
@media (max-width: 1024px) {
  .modern-table .el-table__body-wrapper {
    overflow-x: auto;
  }
  
  .modern-table .el-table {
    min-width: 1000px;
  }
}
</style>
